<template>
	<view>
		<!-- 日历组件 -->
		<view class="container">
			<view class="header">
				<view class="icon"><u-icon name="arrow-left" color="#ccc" size="40" @click="prevMonth"></u-icon></view>
				<view style="margin: 0 20upx">{{ currentMonth + 1 }}月 {{ currentYear }}年</view>
				<view class="icon">
					<u-icon name="arrow-right" color="#ccc" size="40" @click="nextMonth"></u-icon>
				</view>
			</view>
			<view class="calendar">
				<view class="weekdays">
					<view class="weeks" v-for="(day,index) in weekdays" :key="index"
						:class="{ 'first-week': index > 0 }">
						{{ day }}
					</view>
				</view>
				<view class="calendar-body">
					<view class="row" v-for="(row,indexR) in calendarRows" :key="indexR">
						<view class="cell" v-for="(cell,index) in row" :key="index" @click="selectDate(cell)"
							:class="{ 'selected': cell.selected,'first-column': index > 0, 'right': index == 6 }">
							{{ cell.date == undefined ?"" : cell.date }}
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 表别设置 -->
		<u-popup v-model="popShow" mode="center">
			<view style="background-color: #fff; border-radius: 20upx; padding: 20upx; margin: 0 20upx;">
				<view class="uPopup">
					<view style="display: flex; flex-wrap: wrap; justify-content: start; margin: -10upx;">
						<view class="class" v-for="(item, index) in list" :key="index" style="margin: 10upx;">
							<view style="font-size: 30upx; margin-right: 10upx;">{{ item.label }}</view>
							<u-icon name="close" color="#ccc" size="20" @click="removeClick(index)"></u-icon>
						</view>
					</view>

					<view style="margin-top: 20upx;">
						<u-input v-model="classValue" placeholder="请输入自定义班次名称按回车或空格添加" maxlength="4"
							@confirm="addConfirm()"></u-input>
					</view>
				</view>
				<view style="margin-top: 20upx;margin-left: 10upx;color: red;">
					班次一旦设置完毕，在当前页面不可更改，如果班次想重新设置，请重新进入此页面来设置，受手机版面所限，班次请用四个汉字长度。</view>
				<view style="margin-top: 20upx;text-align: center;padding: 20upx;border: 1px solid #ccc;"
					@click="accomplish">设置完毕</view>
			</view>
		</u-popup>
		<u-select v-model="selectShow" :list="list" @confirm="confirm"></u-select>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				classValue: '',
				popShow: true,
				selectShow: false,
				list: [{
						value: '1',
						label: 'A1'
					},
					{
						value: '2',
						label: 'A2'
					},
					{
						value: '3',
						label: 'A3'
					},
					{
						value: '4',
						label: 'A4'
					},
					// {
					// 	value: '5',
					// 	label: 'A5'
					// },
					// {
					// 	value: '6',
					// 	label: 'A6'
					// },
					// {
					// 	value: '7',
					// 	label: 'B1'
					// },
					// {
					// 	value: '8',
					// 	label: 'B2'
					// },
					// {
					// 	value: '9',
					// 	label: 'B3'
					// },
					// {
					// 	value: '10',
					// 	label: 'B4'
					// },
					// {
					// 	value: '11',
					// 	label: 'C1'
					// },
					// {
					// 	value: '12',
					// 	label: 'C2'
					// },
					// {
					// 	value: '13',
					// 	label: 'C3'
					// },
					// {
					// 	value: '14',
					// 	label: 'C4'
					// },
					// {
					// 	value: '15',
					// 	label: 'CR'
					// }
				],
				currentDate: new Date(),
				currentMonth: 0,
				currentYear: 0,
				// weekdays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
				weekdays: ['日', '一', '二', '三', '四', '五', '六'],
				calendarRows: [],
				select: {},
				optionDate: {}
			};
		},
		mounted() {
			// this.$refs.popup.open()
			this.renderCalendar(this.currentDate);
		},
		onLoad() {

		},
		methods: {
			// 班别设置完成
			accomplish() {
				this.popShow = false
			},
			// 添加到班别数组中
			addConfirm() {
				// console.log(this.classValue);
				this.list.push({
					label: this.classValue
				})
				this.classValue = ""
			},
			// 移除班别
			removeClick(index) {
				this.list.splice(index, 1)
			},
			// 选择的对应数据
			confirm(e) {
				this.calendarRows.forEach(item => {
					item.forEach((itemD, indexD) => {
						if (itemD.date == this.optionDate.date) {
							itemD.date = e[0].label
							itemD.selected = true
						}
					})
				})
			},
			// 获取日历
			renderCalendar(date) {
				const currentMonth = date.getMonth();
				const currentYear = date.getFullYear();
				const currentDate = new Date();

				const firstDay = new Date(currentYear, currentMonth, 1).getDay();
				const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();

				this.currentMonth = currentMonth;
				this.currentYear = currentYear;

				const calendarRows = [];
				let dateCount = 1;

				for (let i = 0; i < 6; i++) {
					const row = [];

					for (let j = 0; j < 7; j++) {
						if (i === 0 && j < firstDay) {
							row.push({});
						} else if (dateCount > daysInMonth) {
							break;
						} else {
							row.push({
								date: dateCount,
								selected: false
							});
							dateCount++;
						}
					}

					calendarRows.push(row);
				}

				this.calendarRows = calendarRows;
			},
			// 上月
			prevMonth() {
				this.currentDate.setMonth(this.currentDate.getMonth() - 1);
				this.renderCalendar(this.currentDate);
			},
			// 下月
			nextMonth() {
				this.currentDate.setMonth(this.currentDate.getMonth() + 1);
				this.renderCalendar(this.currentDate);
			},
			// 点击日期事件
			selectDate(cell) {
				this.select = cell
				const selectedDate = cell.date;
				if (selectedDate == undefined) {
					return;
				}
				this.optionDate = cell
				this.selectShow = !this.selectShow
				// this.$forceUpdate();
			},
		},
	};
</script>

<style lang="scss">
	.container {
		margin: 0 40upx;
		margin-top: 40upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		border: 1px solid #ccc;
		border-bottom: none;
	}

	.header {
		display: flex;
		align-items: center;
		text-align: center;
		justify-content: space-between;
		font-size: 40upx;
		font-weight: bold;
		padding: 20upx 40upx;
		border: 1px solid #ccc;
		border-bottom: none;
		border-right: none;

		.icon {
			height: 60upx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.calendar {
		font-size: 35upx;

	}

	.weekdays {
		display: flex;
		font-weight: bold;
		justify-content: space-around;

		.weeks {
			flex-basis: calc(100% / 7);
			padding: 10px;
			border: 1px solid #ccc;

			display: flex;
			justify-content: center;
			align-items: center;
		}

		.weeks:last-child {
			border-right: none;
		}

		.first-week {
			border-left: none;
		}
	}

	.calendar-body {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.row {
		display: flex;
		flex-direction: row;
		border: 1px solid #ccc;
	}

	.cell {
		flex-basis: calc(100% / 7);
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10px;
		border-right: 1px solid #ccc;
	}


	.first-column {
		border-left: none;
	}

	.right {
		border-right: none;
	}

	.selected {
		background-color: #f00;
	}

	.uPopup {

		// background-color: #fff;
		padding: 20upx;

		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		border: 1px solid #ccc;
		border-radius: 20upx;

		.class {
			padding: 10upx 20upx;
			border: 1px solid #ccc;
			margin: 10upx;
			border-radius: 8upx;
			display: flex;
			text-align: center;
			align-items: center;
			font-size: 40upx;
		}
	}
</style>